<template>
	<view>
		<view class="list">
			<view class="item" v-for="(item,index) in list" :key="index" @click="jump(`/pages/topics/detail?id=${item.id}`)">
				<view class="info">
					<view class="user-info u-flex">
						<image :src="item.headimg" class="avatar"></image>
						<view class="name u-line-1">{{item.nickname}}</view>
						<image :src="item.levelLogo" v-if="item.levelLogo" class="level"></image>
						<text v-if="item.tab === 2">专家</text>
					</view>
				</view>
				
				<view class="content">
					<view class="title">{{item.title}}</view>
					<!-- 图文 -->
					<template v-if="item.type == 1">
						<view class="text u-line-2">{{item.content}}</view>
						<view class="images u-flex u-flex-wrap" v-if="item.image.length">
							<image v-for="(img,index2) in item.image" :key="index2" :src="img" @click.stop="lookImg(img,item.image)" mode="aspectFill"></image>
						</view>
					</template>
					<!-- 音频 -->
					<template v-if="item.type == 2">
						<view class="mp3 u-flex" @click.stop="playMp3(item,index)">
							<view class="icon" style="padding: 0 20rpx 0 10rpx;">
								<u-icon name="play-circle-fill" color="#fff" size="44"></u-icon>
							</view>
							<v-loading2 :play="item.id === playing.id"></v-loading2>
								<view class="second" v-show="item.content || item.id === playing.id">{{item.id === playing.id ? playing.second : item.content +'s'}}</view>
						</view>
					</template>
				</view>
				<view class="count u-flex">
					<view class="num">{{item.replyCount || 0}} 回复</view>
					<view class="num">{{item.thumbs || 0}} 赞</view>
					<view class="delete" @click.stop="del(item.id,index)">删除</view>
				</view>
			</view>
		</view>
		
		<view class="safe-area-inset-bottom"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page:1,
				list:[],
				status:'loading',
				audio:uni.createInnerAudioContext(),//音频播放上下文对象
				playing:{
					second:'',
					id:-1
				},//当前播放的对象
			}
		},
		methods: {
			getList(){
				this.status = 'loading'
				this.$u.api.questionList({
					page:this.page,
					limit:10,
				}).then(res=>{
					this.list = this.page == 1 ? res : this.list.concat(res)
					this.status = res.length  === 10 ? 'loadmore' : 'nomore'
					uni.stopPullDownRefresh()
				})
			},
			lookImg(img,item){
				console.log(img,item)
				uni.previewImage({
					urls:item,
					current:img
				})
			},
			del(id,index){
				uni.showModal({
					content:'是否删除',
					success: (res) => {
						res.confirm && this.$u.api.commentDel({
							comment_id:id
						}).then(res=>{
							this.$u.toast('删除成功')
							this.list.splice(index,1)
						})
					}
				})
			},
			playMp3(item){
				this.playing.second = ''
				this.audio.stop()
				this.audio.offEnded()
				this.audio.offTimeUpdate()
				this.audio.offPlay()
				
				if(this.playing.id === item.id){
					// 停止当前
					this.playing.id = -1
				}else{
					this.audio.obeyMuteSwitch = !1
					this.audio.src = item.audio
					this.audio.onPlay(() => {
						console.log('开始播放监听')
						this.playing.id = item.id
						this.audio.offPlay()
					})
					this.audio.onEnded(() => {
						console.log('自然结束监听')
						this.audio.offEnded()
						this.audio.offTimeUpdate()
						this.playing.id = -1
					})
					this.audio.onTimeUpdate(()=>{
						console.log(this.audio.currentTime,this.audio.duration)//这行保留
						this.playing.second = Math.floor(this.audio.duration - this.audio.currentTime) + 's'
					})
					this.audio.play()
				}
			}
		},
		onLoad() {
			this.getList()
		},
		onReachBottom() {
			if(this.status == 'loadmore'){
				this.page ++
				this.getList()
			}
		},
		onPullDownRefresh() {
			this.page = 1
			this.getList()
		}
	}
</script>

<style lang="scss">
	.item{
		border-bottom: 1rpx solid #ddd;padding: 30rpx 50rpx;
		&:last-child{border-bottom: 0;}
		.reply{padding-bottom: 20rpx;word-break: break-all;text-align: justify;font-weight: bold;font-size: 30rpx;}
		.info{
			.user-info{
				.avatar{width: 80rpx;height: 80rpx;border-radius: 50%;flex-shrink: 0;}
				.name{font-size: 28rpx;margin: 0 20rpx;font-weight: bold;}
				.level{width: 90rpx;height: 52rpx;display: block;flex-shrink: 0;}
				text{display: inline-block;border: 1rpx solid $tc;color: $tc;padding: 4rpx 16rpx;border-radius: 100rpx;font-size: 24rpx;white-space: nowrap;margin-left: auto;}
			}
		}
	}
	
	.content{
		padding: 20rpx;
		.text{word-break: break-all;text-align: justify;}
		.title{font-size: 28rpx;font-weight: bold;color: #333;word-break: break-all;line-height: 44rpx;padding:0 0 10rpx;text-align: justify;}
		.images{
			justify-content: space-between;padding-top: 20rpx;
			image{width: 180rpx;height: 180rpx;border-radius: 10rpx;margin-top: 18rpx;
				&:nth-of-type(1),&:nth-of-type(2),&:nth-of-type(3){margin-top: 0;}
			}
			&::after{content: '';display: block;width: 180rpx;}
		}
		.mp3{background-color: #FFC798;height: 56rpx;border-radius: 100rpx;width: 80%;color: #fff;
			.second{margin-left: auto;margin-right: 20rpx;font-weight: bold;}
		}
	}
	
	.count{
		padding-left: 20rpx;
		.num{white-space: nowrap;margin-right: 10rpx;color: #555;font-size: 26rpx;}
		.delete{border: 2rpx solid #333;border-radius: 100rpx;font-size: 24rpx;padding: 4rpx 20rpx;margin-left: auto;white-space: nowrap;font-weight: bold;}
	}
</style>
